<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '能量榜',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="game-hall">
    <!-- 顶部标题 -->
    <view class="header">
      <image class="title" src="/static/images/rank/title.png" />
    </view>

    <!-- 能量类型切换 -->
    <view class="energy-types">
      <view
        v-for="(type, index) in energyTypes"
        :key="index"
        class="energy-type"
        :class="{ active: activeType === index }"
        @click="activeType = index"
      >
        <image class="energy-icon" :src="type.icon" mode="aspectFit"></image>
        <text>能量棒</text>
      </view>
    </view>
    <view class="rank-content">
      <!-- 榜单更新提示 -->
      <view class="update-tip">每日更新能量榜单</view>

      <!-- 前三名显示 -->
      <view class="top-three">
        <view class="top-item" v-for="(item, index) in topThree" :key="index">
          <!-- 用户ID背景 -->
          <view class="user-id-container" :class="'rank-' + item.rank">
            <text class="user-id-text">{{ item.userId }}</text>
          </view>
          <!-- 头像 -->
          <view class="avatar-container">
            <image class="user-avatar" :src="item.avatarSrc" mode="aspectFit"></image>
          </view>

          <!-- 能量值 -->
          <view class="energy-value">{{ formatNumber(item.energy) }}</view>
        </view>
      </view>

      <!-- 排名表头 -->
      <view class="rank-header">
        <view class="header-item">排名</view>
        <view class="header-item">用户</view>
        <view class="header-item">能量值</view>
      </view>

      <!-- 排行榜列表 -->
      <view class="rank-list">
        <view class="rank-item" v-for="(item, index) in rankList" :key="index">
          <view class="rank-number">{{ index + 4 }}</view>
          <view class="rank-user-id">{{ item.userId }}</view>
          <view class="rank-energy-value">{{ formatNumber(item.energy) }}</view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <Tabbar ref="Tabbar" pagePath="/pages/rank/index" />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Tabbar from '@/components/tabbar/tabbar.vue'

// 当前选中的能量类型
const activeType = ref(0)

// 能量类型数据
const energyTypes = ref([
  { icon: '/static/images/rank/blueBang.png' },
  { icon: '/static/images/rank/redBang.png' },
  { icon: '/static/images/rank/goldBang.png' },
])

// 前三名数据
const topThree = ref([
  {
    rank: 2,
    userId: 'ID名',
    energy: 1500000,
    badgeSrc: '/static/images/rank/silver.png',
    avatarSrc: '/static/images/rank/no2.png',
  },
  {
    rank: 1,
    userId: 'ID名',
    energy: 2000000,
    badgeSrc: '/static/images/rank/gold.png',
    avatarSrc: '/static/images/rank/no1.png',
  },
  {
    rank: 3,
    userId: 'ID名',
    energy: 1000000,
    badgeSrc: '/static/images/rank/bronze.png',
    avatarSrc: '/static/images/rank/no3.png',
  },
])

// 排行榜列表数据 (4-15名)
const rankList = ref([
  { userId: 'ID名', energy: 800000 },
  { userId: 'ID名', energy: 750000 },
  { userId: 'ID名', energy: 700000 },
  { userId: 'ID名', energy: 650000 },
  { userId: 'ID名', energy: 600000 },
  { userId: 'ID名', energy: 550000 },
  { userId: 'ID名', energy: 500000 },
  { userId: 'ID名', energy: 450000 },
  { userId: 'ID名', energy: 400000 },
  { userId: 'ID名', energy: 350000 },
  { userId: 'ID名', energy: 300000 },
  { userId: 'ID名', energy: 250000 },
])

// 格式化数字，按图片要求显示
const formatNumber = (num: number) => {
  // 保留所有数字，不添加千位分隔符
  return num.toString()
}
</script>

<style lang="scss">
.game-hall {
  min-height: 100vh;
  background-image: url('/static/images/login/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
  padding: 20rpx;
  overflow: hidden;
}

.header {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 40rpx 0;

  .title {
    width: 550rpx;
    height: 150rpx;
  }
}

.energy-types {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  position: relative;
  z-index: 10;
  margin-bottom: 20rpx;

  .energy-type {
    width: 180rpx;
    height: 80rpx;
    background-image: url('/static/images/rank/unSelect.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 30rpx;
    color: #cccccc;
    &.active {
      background-image: url('/static/images/rank/select.png');
      transform: scale(1.05);
      color: #ffffff;
    }

    .energy-icon {
      width: 60rpx;
      height: 60rpx;
    }
  }
}
.rank-content {
  border: 2px solid #00ffff;
  padding: 0 20rpx 20rpx 20rpx;
  border-radius: 30rpx;
  margin-bottom: 100rpx;
  .update-tip {
    text-align: center;
    font-size: 28rpx;
    color: #fff;
    background-color: #17988d;
    width: 500rpx;
    margin: 0 auto;
    border-radius: 0 0 20rpx 20rpx;
  }

  .top-three {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;
    position: relative;
    z-index: 10;
    margin-bottom: 30rpx;

    .top-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 200rpx;

      // 头像容器
      .avatar-container {
        width: 180rpx;
        height: 130rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .user-avatar {
          width: 100%;
          height: 100%;
        }
      }
      // 能量值颜色
      &:nth-child(2) .avatar-container {
        width: 200rpx;
        height: 150rpx;
      }
      // 用户ID背景容器
      .user-id-container {
        width: 180rpx;
        height: 45rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20rpx;

        .user-id-text {
          font-size: 28rpx;
          color: #000;
          font-weight: bold;
        }
      }

      // 为前三名设置不同的背景图
      .rank-1 {
        width: 200rpx;
        height: 55rpx;
        margin-top: -5rpx;
        background-image: url('/static/images/rank/no1Id.png');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
      }

      .rank-2 {
        background-image: url('/static/images/rank/no2Id.png');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
      }

      .rank-3 {
        background-image: url('/static/images/rank/no3Id.png');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
      }
      .energy-value {
        color: #ffff00;
        font-size: 30rpx;
        font-weight: normal;
      }
      // 能量值颜色
      &:nth-child(2) .energy-value {
        font-size: 35rpx;
      }
    }
  }

  .rank-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    position: relative;
    z-index: 10;
    overflow: hidden;
    padding: 0 50rpx;
    .header-item {
      flex: 1;
      text-align: center;
      font-size: 30rpx;
      color: #00ffff;
    }
  }

  .rank-list {
    flex: 1;
    position: relative;
    z-index: 10;
    margin-bottom: 100rpx; // 为底部导航栏留出空间
    padding: 0 50rpx;
    .rank-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5rpx;
      margin-bottom: 10rpx;
      background: #303f54;
      border-radius: 10rpx;
      border: 1rpx solid #00ffff;
      transition: all 0.3s ease;

      &:active {
        background: linear-gradient(180deg, rgba(46, 131, 255, 0.3), rgba(10, 26, 51, 0.6));
        transform: translateX(10rpx);
        border-color: rgba(0, 255, 255, 0.5);
        box-shadow: 0 0 20rpx rgba(0, 255, 255, 0.3);
      }

      .rank-number {
        flex: 1;
        text-align: center;
        font-size: 25rpx;
        color: #fff;
      }

      .rank-user-id {
        flex: 2;
        text-align: center;
        font-size: 25rpx;
        color: #fff;
      }

      .rank-energy-value {
        flex: 1;
        text-align: center;
        font-size: 25rpx;
        color: #fff;
      }
    }
  }
}
</style>
